import { Image, Swiper, SwiperItem, Text, View } from "@tarojs/components";
import { navigateTo } from "@/utils/common";
import questionImg from "@/assets/question.png";
import noticeImg from "@/assets/notice.png";
import orderSelectedIcon from "@/assets/orderSelectedIcon.png";
import superviseSelectedIcon from "@/assets/superviseSelectedIcon.png";
import mortgageSelected from "@/assets/mortgageSelected.png";
import contractSelect from "@/assets/contractSelect.png";
import logo from "@/assets/banner.png";
import remote from "@/assets/remote.png";
import { useLoad } from "@tarojs/taro";
import { useState } from "react";
import { getArticles } from "@/api";
import "./index.scss";

const Index = () => {
    const [articles, setArticles] = useState([]);
    const handleRoute = (name) => {
        if (name == "test") {
            navigateTo("/pages/buttons/index");
        } else if (name == "question") {
            navigateTo("/pages/buttons/index");
        }
    };

    const handleArticle = (id) => {
        navigateTo("/pages/subs/article/index?id=" + id);
    };

    useLoad(() => {
        getArticles().then((data) => {
            setArticles(data.list);
        });
    });

    return (
        <View className="index">
            <View className="Swiper_block">
                <Swiper
                    indicatorColor="#999"
                    indicatorActiveColor="#333"
                    vertical={false}
                    circular
                    indicatorDots={false}
                    className="Swiper_block"
                >
                    <SwiperItem>
                        <Image src={logo} className="swiper_img"></Image>
                    </SwiperItem>
                </Swiper>
            </View>
            <View className="jump_button_block">
                <View className="jump_button">
                    <Image
                        src={superviseSelectedIcon}
                        className="jump_button_img"
                        onClick={() => {
                            navigateTo("/pages/subs/secondHouse/index");
                        }}
                    />
                    <Text className="jump_button_text">转移登记</Text>
                </View>
                <View className="jump_button">
                    <Image
                        src={mortgageSelected}
                        className="jump_button_img"
                        onClick={() => {
                            navigateTo({
                                url: "/pages/mortgageList/mortgageList",
                            });
                        }}
                    />
                    <Text className="jump_button_text">抵押登记</Text>
                </View>
                <View className="jump_button">
                    <Image
                        src={orderSelectedIcon}
                        className="jump_button_img"
                        onClick={() => {
                            navigateTo({
                                url: "/pages/mortgageTransList/mortgageTransList",
                            });
                        }}
                    />
                    <Text className="jump_button_text">转移抵押合并办</Text>
                </View>
                <View className="jump_button">
                    <Image
                        src={contractSelect}
                        className="jump_button_img"
                        onClick={() => {
                            navigateTo({
                                url: "/pages/contractList/contractList",
                            });
                        }}
                    />
                    <Text className="jump_button_text">合同网签</Text>
                </View>
                <View className="jump_button">
                    <Image
                        src={remote}
                        className="jump_button_img"
                        onClick={() => {
                            navigateTo({
                                url: "/package_a/pages/authenticationRemote/authentication",
                            });
                        }}
                    />
                    <Text className="jump_button_text">远程见证委托</Text>
                </View>
                <View className="jump_button">
                    <Image
                        src={questionImg}
                        className="jump_button_img"
                        onClick={() => {
                            handleRoute("question");
                        }}
                    />
                    <Text className="jump_button_text">常见问题</Text>
                </View>
                <View className="jump_button">
                    <Image
                        src={noticeImg}
                        className="jump_button_img"
                        onClick={() => {
                            handleRoute("notice");
                        }}
                    />
                    <Text className="jump_button_text">通知公告</Text>
                </View>
                <View className="jump_button2"></View>
                <View className="jump_button2"></View>
            </View>
            <View className="space_line"></View>
            <View className="item_wrap">
                <View className="item_view_title">相关资讯</View>
                {articles.map((info: any, index) => {
                    return (
                        <View
                            className="item_view"
                            key={index}
                            onClick={() => {
                                handleArticle(info.id);
                            }}
                        >
                            <View className="item_view_text">
                                <Text className="item_view_text_title">
                                    {info.title}
                                </Text>
                                <Text className="item_view_text_detail">
                                    {info.content}
                                </Text>
                            </View>
                        </View>
                    );
                })}
            </View>
        </View>
    );
};

export default Index;
